<%@page import="classes.LifebookImage"%>
<%@page import="classes.DB"%>
<%@page import="classes.LifebookUser"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>

    <body style ="background-image:url('bg.png')">
        <%
            LifebookUser user = (LifebookUser) session.getAttribute("user");
            if (user == null) {
                response.sendRedirect("index.jsp");
            }
        %>


        <!-- navbar -->
        <div class="navbar">
            <div class="navbar-inner">
                <a class="brand" href="#"><b class ="life">Life</b><b class = "book">Book</b></a>
                <ul class="nav">
                    <li><a href ="browse.jsp"><span class ="navbarText"><i class = "icon-home icon-white"></i> Home</span></a></li>
                    <li><a href ="users.jsp"><span class ="navbarText"><i class = "icon-user icon-white"></i> Users</span></a></li>
                    <li class ="active"><a href ="users/<%=user.getUsername()%>"><span class ="navbarText"><i class = "icon-list-alt icon-white"></i> Profile</span></a></li>
                </ul>
                <button class="btn pull-right btn-success" onClick ="location.href = 'LogoutServlet';">Logout</button>
            </div>
        </div>

        <!-- Edit User -->
        <div class = "container">
            <div class = "span4 offset4" style = "background-color:rgba(141,198, 63, 0.3)">
                <center>
                    <form class = "form-signing" action="EditProfileServlet" method="post">
                        <h2 class = "form-signin-heading">Edit Profile</h2>
                        <h4>Email:</h4>
                        <input name = "email" type = "text" id = "email" placeholder = "Email" value="<%= user.getEmail()%>" onKeyUp="validate();">
                        <h4>Password:</h4>
                        <input name = "password" type = "password" id = "pass1"placeholder = "Password" value="<%= user.getPassword()%>" onKeyUp="validate();">
                        <h4>Confirm Password:</h4>
                        <input type = "password" id = "pass2" placeholder = "Confirm Password" value="<%= user.getPassword()%>" onKeyUp="validate();">
                        <h4>First Name:</h4>
                        <input name = "firstname" type = "text" id = "firstname" placeholder = "First Name" value="<%= user.getFirstName()%>" onKeyUp="validate();">
                        <br/><h4>Last Name:</h4>
                        <input name = "lastname" type = "text" id = "lastname" placeholder = "Last Name" value="<%= user.getLastName()%>" onKeyUp="validate();">
                        <h4>Sex:</h4>
                        <select class ="sexSelector" name = "sex">
                            <option value = "Male">Male</option>
                            <option value = "Female" <%=user.getSex() == 'F' ? "selected" : ""%>>Female</option>
                        </select>
                        <h4>Birthday:</h4>
                        <input type="date" id ="birthday" name = "birthday" value="<%= user.getBirthDay()%>" onChange = "validate();">
                        <br/>
                        <h4>About Me:</h4>
                        <textarea id = "aboutme" rows="3" name ="aboutme" placeholder = "About Me"><%= user.getAboutMe()%></textarea>
                        <br><br>
                        <button id="submit" class = "btn btn-large btn-primary" type = "submit">Confirm Changes</button>
                        <br><br>
                        <a href="#modal-deactivate" role="button" class="btn btn-mini btn-danger" data-toggle="modal">Disable Account</a>
                    </form>
                </center>
            </div>
        </div>

        <!-- Disable Account -->
        <div id="modal-deactivate" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <form action="DeactivateAccountServlet" method="post">
                <div class="modal-header">
                    <center>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel">Confirm Deactivation</h3>
                    </center>
                </div>
                <div class="modal-body">
                    <center><h4>Are you sure that you want to disable your account?</h4></center>
                </div>
                <div class="modal-footer">
                    <center>
                        <button class = "btn btn-large btn-primary" data-dismiss="modal" aria-hidden="true">I don't want to</button>
                        <br/><br/>
                        <button class = "btn btn-mini btn-danger" formaction="DeactivateAccountServlet">Disable Account</button>
                    </center>
                </div>
            </form>
        </div>


        <script>
                    function validate() {
                        var formCheck = new Boolean(true);

                        //Email
                        var email = $("#email").val();
                        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
                            $("#email").css({'backgroundColor': 'lightgreen'});
                        } else if (email.length === 0) {
                            $("#email").css({'backgroundColor': 'white'});
                            formCheck = false;
                        }
                        else {
                            $("#email").css({'backgroundColor': 'pink'});
                            formCheck = false;
                        }

                        //Password
                        var pass1 = $("#pass1").val();
                        var pass2 = $("#pass2").val();
                        if (pass1.length >= 6) {
                            $("#pass1").css({'backgroundColor': 'lightgreen'});
                        } else if (pass1.length === 0) {
                            $("#pass1").css({'backgroundColor': 'white'});
                            formCheck = false;
                        } else {
                            $("#pass1").css({'backgroundColor': 'pink'});
                            formCheck = false;
                        }
                        if (pass2.length === 0) {
                            $("#pass2").css({'backgroundColor': 'white'});
                            formCheck = false;
                        }
                        else if (pass1 === pass2) {
                            $("#pass2").css({'backgroundColor': 'lightgreen'});
                        } else {
                            $("#pass2").css({'backgroundColor': 'pink'});
                            formCheck = false;
                        }

                        //Firstname
                        var firstname = $("#firstname").val();
                        if (firstname.length >= 1) {
                            $("#firstname").css({'backgroundColor': 'lightgreen'});
                        } else {
                            $("#firstname").css({'backgroundColor': 'pink'});
                            formCheck = false;
                        }

                        //Lastname
                        var lastname = $("#lastname").val();
                        if (lastname.length >= 1) {
                            $("#lastname").css({'backgroundColor': 'lightgreen'});
                        } else {
                            $("#lastname").css({'backgroundColor': 'pink'});
                            formCheck = false;
                        }

                        //Birthday
                        var checkDate = new Date();
                        checkDate.setUTCFullYear(checkDate.getUTCFullYear() - 18);
                        if ($("#birthday").val().length === 0) {
                            $("#birthday").css({'backgroundColor': 'white'});
                            formCheck = false;
                        }
                        else if ($("#birthday").val().substring(0, 4) <= checkDate.getFullYear()) {
                            $("#birthday").css({'backgroundColor': 'lightgreen'});
                        } else if ($("#birthday").val().substring(0, 4) > checkDate.getFullYear()) {
                            $("#birthday").css({'backgroundColor': 'pink'});
                            formCheck = false;
                        }

                        //Enable or Disable Button
                        if (formCheck)
                            $("#submit").removeAttr("disabled");
                        else
                            $("#submit").attr("disabled", true);
                    }
        </script>

        <script src="js/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>

    </body>
</html>